<template>
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    active-text-color="#ffd04b"
  >
    <template v-for="item in menus">
      <template v-if="item.submenu && item.submenu.length">
        <el-submenu :key="item.id" :index="item.id">
          <template slot="title">{{item.title}}</template>
          <el-menu-item
            v-for="subitem in item.submenu"
            :key="subitem.id"
            :index="subitem.id"
          >{{subitem.title}}</el-menu-item>
        </el-submenu>
      </template>
      <template v-else>
        <el-menu-item :key="item.id" :index="item.id">{{item.title}}</el-menu-item>
      </template>
    </template>
  </el-menu>
</template>
<script>
  export default {
    name: 'NavMenu',
    data() {
      return {
        activeIndex: '1',
        activeIndex2: '1',
        menus: [
          {
            id: '1',
            title: '首页',
            path: ''
          },
          {
            id: '2',
            title: 'APP',
            path: ''
          },
          {
            id: '3',
            title: '商家入驻',
            path: ''
          },
          {
            id: '4',
            title: '智慧城市',
            path: ''
          },
          {
            id: '5',
            title: '关于给乐',
            path: '',
            submenu: [
              {
                id: '5-1',
                title: '企业简介',
                path: ''
              },
              {
                id: '5-2',
                title: '发展历程',
                path: ''
              },
              {
                id: '5-3',
                title: '给乐新闻',
                path: ''
              },
              {
                id: '5-4',
                title: '加入给乐',
                path: ''
              }
            ]
          },
          {
            id: '6',
            title: '联系给乐',
            path: ''
          }
        ]
      }
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-submenu,
  .el-menu-item {
    float: right;
  }
</style>
